<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/include.inc.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/views/layout/base.ref.jsp"%>
<%@include file="/WEB-INF/views/layout/valid.ref.jsp"%>
<link href="${ctx}/static/controls/zTree/css/zTreeStyle.css" rel="stylesheet" type="text/css">
<style>
.layout_main {
	position: absolute;
	left: 30px;
	top: 150px;
	bottom: 0;
	right: 0;
	overflow: auto;
	z-index: 1;
}
</style>
</head>
<body>
	<form method="post" id="form1" action="${ctx}/sysRole/save">
		<input type="hidden" name="id" value="${sysRole.id}" />
		<%@include file="/WEB-INF/views/login/home/toolbar.jsp"%>
		<div class="mtcontent">
			<div class="mtheader">
				<shiro:hasPermission name="sysRole:edit">
					<a class="mtbtn one" href="#" onclick="hrefSave_OnClick('form1')"><i class="mtfa mt-dui"></i><span>保存</span></a>
				</shiro:hasPermission>
				<a class="mtbtn two" href="#" onclick="hrefRet_OnClick('${ctx}/sysRole/list')"><i class="mtfa mt-refresh"></i><span>返回</span></a>
			</div>
			<div class="mtbody">
				<div class="mtrow">
					<div class="mtcol">
						<label class="mtlabel">角色名称 </label> <input type="text" class="mtinput" name="roleName"
							value="${sysRole.roleName}" />
					</div>
					<div class="mtcol">
						<label class="mtlabel">备注 </label> <input type="text" class="mtinput" name="remark" value="${sysRole.remark}" />
					</div>
					<div class="mtcol">
						<label class="mtlabel">显示顺序 </label> <input type="text" class="mtinput" name="showOrder"
							value="${sysRole.showOrder}" />
					</div>
				</div>

			</div>
		</div>
		<div class="layout_main">
			<ul id="menuTree" class="ztree"></ul>
		</div>

	</form>
</body>
</html>
<script src="${ctx}/static/controls/zTree/js/jquery.ztree.core.js" type="text/javascript"></script>
<script src="${ctx}/static/controls/zTree/js/jquery.ztree.excheck.js" type="text/javascript"></script>
<script src="${ctx}/static/controls/zTree/js/jquery.ztree.exedit.js" type="text/javascript"></script>


<script type="text/javascript">
	function CheckAll() {
		if ($('#CheckBoxAll').is(':checked')) {
			$("input[type='checkbox']").prop("checked", true);
		} else {
			$("input[type='checkbox']").prop("checked", false);
		}
	}

	var zTree;
	// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
	var setting = {
		check : {
			enable : true,
			chkboxType : {
				"Y" : "",
				"N" : ""
			}
		},

		view : {
			dblClickExpand : true,
			addDiyDom : addDiyDom,
			fontCss : getFont,
			nameIsHTML : true
		},

		data : {

			key : {
				name : "name"
			},

			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "parentId"
			}

		},

		callback : {
			beforeClick : beforeClickMenu,
			onCheck : onCheckMenu
		}

	};

	$(document).ready(function() {
		var zNodes = ${listMenu};
		zTree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
		zTree.expandAll(true);

		var nu = 1;
		var conodes = zTree.transformToArray(zTree.getNodes());
		for (var i = 0, l = conodes.length; i < l; i++) {
			if (nu == 1) {
				conodes[i].font = {
					'background-color' : '#f7f4fd',
					'width' : '80%',
					'font-size' : '13px'
				};
				nu = 2;
			} else {
				conodes[i].font = {
					'width' : '80%',
					'size' : '13'
				};
				nu = 1;
			}
			zTree.updateNode(conodes[i]);
		}
	});

	function getFont(treeId, node) {
		return node.font ? node.font : {};
	}

	function addDiyDom(treeId, treeNode) {
		var aObj = $("#" + treeNode.tId + "_a");
		var editStr = "<span style='position: absolute;left:240px;'>";
		if (treeNode.permissions != null && treeNode.permissions != "null") {
			for (var i = 0; i < treeNode.permissions.length; i++) {
				var button = treeNode.permissions[i];
				if (button.ifxz == 1) {
					editStr = editStr + " <input style='margin-left:30px;' type='checkbox' id='checkbox_" +treeNode.id+"_"+button.id+"' name='privileId' value='" +button.id+"' checked> "
							+ button.operatName + " </input> ";
				} else {
					editStr = editStr + " <input style='margin-left:30px;' type='checkbox' id='checkbox_" +treeNode.id+"_"+button.id+"' name='privileId' value='" +button.id+"'> " + button.operatName
							+ " </input> ";
				}
			}

		}
		editStr = editStr + "</span>";
		aObj.after(editStr);
	}

	function beforeClickMenu(treeId, treeNode) {
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}

	function onCheckMenu(e, treeId, treeNode) {

		if (treeNode.checked == true) {
			$("input[id*='checkbox_" + treeNode.id + "_']").prop("checked", true);
		} else {
			$("input[id*='checkbox_" + treeNode.id + "_']").prop("checked", false);
		}

	}
</script>
